<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v="http://www.w3.org/1999/xhtml" xmlns:v-demo="http://www.w3.org/1999/xhtml"
      xmlns:v-myDirective="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo..</title>
    <script src="../common/vue.min.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->


<div id="div_test" v-myDirective:hello.a.b="msg">
     12345
    <div v-demo="{ color: 'white', text: 'hello!' }"></div>

    <div v-d1.literal="foo bar baz">字面修饰符</div>

    <hr/>
    <my-directive></my-directive>

    <hr/>
    <div v-example a="hi"></div>


</div>


<script type="text/javascript">

    //TODO 没起效果啊

    Vue.directive('myDirective', {
        bind: function () {
            console.log("bind钩子调用..")
        },
        update: function (value) {
            this.el.innerHTML =
                    'name -' + this.name + '<br/>' +
                    'expression -' + this.expression + '<br/>' +
                    'argument -' + this.arg + '<br/>' +
                    'modifiers -' + JSON.stringify(this.modifiers) + '<br/>' +
                    'value -' + value

        }

    })

    Vue.directive('demo', function (value) {
        console.log(value.color) // "white"
        console.log(value.text) // "hello!"
    })
    Vue.directive('d1', function (value) {
        console.log(value)
    })

    Vue.elementDirective('my-directive', {
        // API 同普通指令
        bind: function () {
            // 操作 this.el...
        }
    })

    Vue.directive('example', {
        params: ['a'],
        bind: function () {
            console.log("AAAAAAAAAA---"+this.params.a) // -> "hi"
        }
    })

    var vm = new Vue({
        el: "#div_test",
        data: {msg: "hello"},
        methods: {}
    })


</script>

</body>
</html>